    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>滚动轮播图</title>
    </head>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;

        }
        .all{
            width: 520px;
            height: 280px;
            margin: 100px auto;
            padding: 5px;
            border:1px solid #bbccc8;

        }
        .inner{
            overflow: hidden;
            width: 520px;
            height: 280px;
            /*padding: 10px;*/

            position: relative;
        }
        .inner .ulLi{
            position: absolute;
            height: 280px;
            list-style: none;
            width: 600%;
        }
        .inner .ulLi li{
            float: left;
        }

        .leftBtn{
            position: absolute;
            left: 5px;
            top: 115px;
            font-size: 50px;
            color:  rgba(0, 0, 0, 0.11);
            border: 1px solid rgba(0, 0, 0, 0.11);
            background-color: rgba(206, 206, 206, 0.18);

        }
        .rightBtn{
            position: absolute;
            right: 5px;
            top: 115px;
            font-size: 50px;
            color: rgba(0, 0, 0, 0.11);
            border: 1px solid rgba(0, 0, 0, 0.11);
            background-color: rgba(206, 206, 206, 0.18);
        }
        /*对小方框btn进行样式添加*/
        .inner ol li{
            display: block;
            width: 18px;
            height: 18px;
            border: 1px solid #0C0C0C;
            background: #00F7DE;
            color: #0C0C0C;
            font-size: 12px;
            text-align: center;
            line-height: 18px;
        }
        #square{
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 150px;
            /*height: 100px;*/
            /*background: #66ff49;*/
        }
        #square li{
            float: left;
            margin:0 5px;
        }
        .inner #square .current{
            background: #b8151d;
        }

    </style>
    <script type="text/javascript">
        window.onload=function () {

            var btn=document.getElementsByClassName('btn')[0];
            var all=document.getElementsByClassName('all')[0];
            var leftBtn=document.getElementsByClassName('leftBtn')[0];
            var rightBtn=document.getElementsByClassName('rightBtn')[0];
            var ulLi=document.getElementsByClassName('ulLi')[0];
            var liChild=ulLi.children;
            var inner=document.getElementsByClassName('inner')[0];
            var square=inner.children[1];
            var olLi=square.children;


            var s=0;
            var p=0;
            leftBtn.onclick=function () {
                s--;
                if (s<0){
                    ulLi.style.left = -520*(olLi.length)+"px";
                    s=olLi.length-1;
                }
                animate(-520*s,ulLi);


                p--;
                //索引值不能大于4，大于5必须变为0
                if(p<0){
                    p=olLi.length-1;
                }
                for (var h=0;h<olLi.length;h++){
                    olLi[h].className='';
                }
                olLi[p].className='current';
            };


            rightBtn.onclick=function () {
               autoPlay();
            };
            //animate函数开始，其实是控制整个图片滑动的函数
            function animate(pace,func) {

                clearInterval(func.timer);

                var speed=0;
                if (func.offsetLeft<pace){
                    speed=5;
                }else {
                    speed=-5;
                }
                func.timer=setInterval(function () {
                    func.style.left=func.offsetLeft+speed+"px";
                    var distance=pace-func.offsetLeft;
                    if (Math.abs(distance)<=5){
                        clearInterval(func.timer);
                        func.style.left=pace+"px";
                    }
                },5);
            };


        //对ol里面添加小btn使用js添加
            for (var i=0;i<liChild.length;i++){
                var li=document.createElement('li');
                square.appendChild(li);
                olLi[i].innerHTML=i+1;
            }

        //将ulLi第一张图片复制添加作为最后一个li
            var copyfirstLi=liChild[0];
            ulLi.appendChild(copyfirstLi.cloneNode(true));
            //要将小方框与图联系起来，点击小方框对应的图也动
            olLi[0].className="current";

            for(var k=0;k<olLi.length;k++){
                olLi[k].index=k;
                olLi[k].onclick=function () {
                    for (var m=0;m<olLi.length;m++){
                        olLi[m].className='';
                    }
                    console.log(this.index);
                    this.className="current";
                    s=p=this.index;
                    animate(-520*this.index,ulLi);
                }
            }
            //加入定时器使按钮与图片同时滚动的


           var timer= setInterval(autoPlay,1000);


            function autoPlay () {
                s++;
                if (s>olLi.length){
                    ulLi.style.left = 0;
                    s=1;
                }
                animate(-520*s,ulLi);


                p++;
                //索引值不能大于4，大于5必须变为0
                if(p>olLi.length-1){
                    p=0;
                }
                for (var h=0;h<olLi.length;h++){
                    olLi[h].className='';
                }
                olLi[p].className='current';

            };



            inner.onmouseover=function () {

                  btn.style.display='';
                  clearInterval(timer);
            };
            inner.onmouseout=function () {
                   btn.style.display='none';

                timer=setInterval(autoPlay,1000);
            };

                }


    </script>
    </head>
    <body>
    <div class="all">
        <div class="inner">
            <ul class="ulLi">
                <li><img src="zuoyou焦点图/1.jpg" alt="第一张图"></li>
                <li><img src="zuoyou焦点图/2.jpg" alt="第二张图"></li>
                <li><img src="zuoyou焦点图/3.jpg" alt="第三张图"></li>
                <li><img src="zuoyou焦点图/4.jpg" alt="第四张图"></li>
                <li><img src="zuoyou焦点图/5.jpg" alt="第五张图"></li>
            </ul>
            <ol id="square">

            </ol>
            <div class="btn">
                <span class="leftBtn"><</span>
                <span class="rightBtn">></span>
            </div>

        </div>
    </div>
    </body>
    </html>